<template>
	<div>
		<div class="special-bg">
			<img :src="imgAddress + content.coverImgpath" @error="error(5)"/>
		</div>
		<div class="main-width bg-color-white">
			<div class="special-line special"></div>
			<div class="special-bg img-padding" v-for="item in serialContent">
				<div v-if="item.jumpStyle == 1">
					<a><img :src="imgAddress + item.imagePath" @error="error(6)"/></a>
				</div>
				<div v-else-if="item.jumpStyle == 2">
					<router-link tag="a" :to="{name: 'Detail', query: {goodsId: item.jumpTo}}"><img v-bind:src="imgAddress + item.imagePath" @error="error(6)"/></router-link>
				</div>
				<div v-else-if="item.jumpStyle == 3">
					<a :href="item.jumpTo"><img v-bind:src="imgAddress + item.imagePath" @error="error(6)"/></a>
				</div>
				<div v-else>
					<a><img :src="item.imagePath" @error="error(6)"/></a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {activity,imgAddress} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'

	export default {
		data(){
			return {
				content: {},
				serialContent: {},
				imgAddress: imgAddress,
				userId: store.state.userId,
				pageNum: 1,
				pageSize: 10
			}
		},
		mounted(){
			this.activityInit();
			this.load();
		},
		methods: {
			error(num){
				imageError(num, event);
			},
			activityInit(){
				var data = {
					activityType: 1,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					userId: this.userId
				};
				var url = activity;
				fetch(url, data)
				.then(res => {
                    this.content = res.data;
					this.serialContent = res.data.listSerialContent;
                });
			},
			load(){
				this.pageNum = this.pageNum + 1;
				var data = {
					activityType: 1,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					userId: this.userId
				};
				var url = activity;
				window.addEventListener('scroll',function(){
			        var windowHeight =  window.innerHeight;  			           
			        var scrollTop = document.body.scrollTop;  			           
			        var docHeight = document.body.clientHeight;
			        var BOTTOM_OFFSET = 0;
			       	if ((BOTTOM_OFFSET + scrollTop) >= docHeight) {  
			       		fetch(url, data)
						.then(res => {
							for(var i = 0; i < res.data.listSerialContent.length; i++){
								this.serialContent.push(res.data.listSerialContent[i]);
							}							
			            });
			        }  
				});							
			}
		}
	}
</script>